<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table ref="singleTable" :data="rightData" highlight-current-row style="width: 100%" border="">
            <el-table-column type="index" width="150">
            </el-table-column>
            <el-table-column property="authName" label="权限"  width="150" >
            </el-table-column>
            <el-table-column property="path" label="路径" width="150">
            </el-table-column>
            <el-table-column property="level" label="层级">
                <template slot-scope="scope">              
                    <span style="margin-left: 10px">{{ scope.row.level | levelFormate}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { rightsListApi,deleteRolesRightsApi } from "@/api/index.js";
export default {
  data() {
    return {
      rightData: [],
      currentRow: null
    };
  },
  mounted() {
    rightsListApi("list").then(res => {
      console.log(res);
      this.rightData = res.data;
    });
  },
//   添加局部过滤器
filters:{
    levelFormate:function(value){
        if(value==0){
            return "一级"
        }else if(value==1){
            return "二级"
        }else if(value==2){
            return "三级"
        }else {
            return "aa"
        }
    }
}
};
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>